<template>
  <view class="pay">
    <PageWarpper :page-name="payStatus ? '' : '车牌号确认'">
      <template v-slot:main>
        <!--order status-->
        <view class="order-status border-top d-flex" v-if="[1, 2].includes(payStatus)">
          <PayStatus
            :pay-info="{
              img_name: payStatus == 1 ? 'pay_wait' : 'pay_success',
              name: payStatus == 1 ? '待付款' : '支付成功',
            }"
          />
        </view>

        <!--license indo-->
        <view class="license-info border-top">
          <view class="card-hd d-flex border-bottom" :style="{ height: !payStatus ? '85px' : '' }">
            <text class="siyuan-medium">车牌号</text>
            <label>
              <text class="siyuan-medium">浙</text>
              <text class="intel-one-mono-medium">1234564</text>
            </label>
          </view>
          <OrderCell :list="orderInfo.slice(0, 2)" />
          <view class="card-hd d-flex border-bottom" :style="{ height: !payStatus ? '85px' : '' }">
            <text class="siyuan-medium">{{ !payStatus ? "应付金额" : "合计" }}</text>
            <view class="intel-one-mono-medium">
              <label v-if="!payStatus">
                <text class="intel-one-mono-medium">32.00</text>
                <text class="siyuan-medium" style="margin-left: 20rpx">元</text>
              </label>
              <label v-else>
                <text class="siyuan-medium" style="margin-right: 38rpx">￥</text>
                <text class="intel-one-mono-medium">32.00</text>
              </label>
            </view>
          </view>
          <template v-if="payStatus">
            <OrderCell :list="orderInfo.slice(2, 4)" />
            <OrderCell :list="orderInfo.slice(4, 8)" />
            <!--Pay Options-->
            <view class="pay-option d-flex border-bottom" v-if="payStatus == 1">
              <button class="black-btn">取消支付</button>
              <button class="black-btn">确认支付</button>
            </view>
          </template>
          <template v-else>
            <Pay custom-style="park-confirm"/>
            <!-- Service Protocol -->
            <view
              class="service"
              @click="openPage('/pages/personal/agreement?source_type=parkpay')"
            >
              《xxx服务条款》
            </view>
            <Menus :list="[{ name: '确认支付', es_name: 'Confirm' }]" />
          </template>
        </view>
      </template>
    </PageWarpper>
  </view>
</template>

<script setup>
import { ref } from "vue";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import PayStatus from "@/components/Tags/PayStatus.vue";
import OrderCell from "@/components/List/OrderCell.vue";
import Pay from "@/components/Modules/Pay.vue";
import Menus from "@/components/List/Menus.vue";
import { openPage } from "@/util/index.js";

let payStatus = ref(0); //0 查询订单 1:待付款 2:支付成功

let orderInfo = ref([
  { name: "入场时间", feile: "enter_time", data: "2024-09-06  12:23:21" },
  { name: "停车时长", feile: "park_time", data: '<span class="intel-one-mono-medium">3</span><span class="siyuan-medium">小时</span><span class="intel-one-mono-medium">48</span><span class="siyuan-medium">分</span>' },
  { name: "支付方式", feile: "pay_method", data: "积分支付" },
  { name: "积分抵扣", feile: "point_deduction", data: "+2" },
  { name: "姓名", feile: "name", data: "liuhaha" },
  { name: "手机号", feile: "phone", data: "18852412356" },
  { name: "订单编号", feile: "order_number", data: "A2024121212121212" },
  { name: "下单时间", feile: "order_time", data: "2024-08-21 11:00:48" },
]);
</script>

<style lang="scss" scoped>
.license-info {
  .service {
    margin: 146rpx 0 40rpx;
    font-size: 20rpx;
    text-align: center;
  }
}
.order-status {
  height: 336rpx;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}
.card-hd {
  height: 66rpx;
  padding: 0 34rpx 0;
  background-color: #f2f2f2;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  label > .siyuan-medium {
    font-size: 32rpx;
  }
  label > .intel-one-mono-medium {
    font-size: 40rpx;
  }
}
.pay-option {
  button:first-child {
    width: 170rpx;
    background-color: #ffffff;
    color: var(--default-text);
  }
  button {
    height: 68rpx;
    line-height: 68rpx;
  }
  button + button {
    flex: 1;
  }
}
:global(.order-groups) {
  padding: 32rpx 34rpx 14rpx 28rpx;
}
:global(.pay-item-cate) {
  height: 100rpx !important;
}
</style>
